<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NPM 下载量统计工具</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div class="container">
        <header class="header">
            <h1><i class="fab fa-npm"></i> NPM 下载量统计工具</h1>
            <p class="subtitle">轻松查看和比较 NPM 包的下载统计数据</p>
        </header>

        <div class="main-content">
            <!-- 单包查询 -->
            <section class="search-section">
                <h2><i class="fas fa-search"></i> 单包查询</h2>
                <div class="search-form">
                    <input type="text" id="packageInput" placeholder="输入包名，如：react, vue, lodash" class="search-input">
                    <select id="periodSelect" class="period-select">
                        <option value="last-day">最近一天</option>
                        <option value="last-week">最近一周</option>
                        <option value="last-month" selected>最近一月</option>
                        <option value="last-year">最近一年</option>
                    </select>
                    <button onclick="searchPackage()" class="search-btn">
                        <i class="fas fa-search"></i> 查询
                    </button>
                </div>
            </section>

            <!-- 多包比较 -->
            <section class="compare-section">
                <h2><i class="fas fa-balance-scale"></i> 多包比较</h2>
                <div class="compare-form">
                    <textarea id="compareInput" placeholder="输入多个包名，每行一个，如：&#10;react&#10;vue&#10;angular"
                        class="compare-textarea"></textarea>
                    <select id="comparePeriodSelect" class="period-select">
                        <option value="last-day">最近一天</option>
                        <option value="last-week">最近一周</option>
                        <option value="last-month" selected>最近一月</option>
                        <option value="last-year">最近一年</option>
                    </select>
                    <button onclick="comparePackages()" class="compare-btn">
                        <i class="fas fa-chart-bar"></i> 比较
                    </button>
                </div>
            </section>

            <!-- 结果显示区域 -->
            <section class="results-section">
                <div id="loading" class="loading hidden">
                    <i class="fas fa-spinner fa-spin"></i> 正在加载...
                </div>

                <div id="singleResult" class="result-card hidden">
                    <!-- 单包结果将在这里显示 -->
                </div>

                <div id="compareResult" class="compare-result hidden">
                    <!-- 比较结果将在这里显示 -->
                </div>

                <div id="chartContainer" class="chart-container hidden">
                    <canvas id="downloadChart"></canvas>
                </div>
            </section>
        </div>

        <footer class="footer">
            <p>&copy; 2024 NPM 下载量统计工具 | 数据来源：<a href="https://npmjs.org" target="_blank">npmjs.org</a></p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>

</html>